<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <form action="" @submit.prevent="handleSubmit">
    <span>用户名：</span>
    <input type="text" v-model="username"> <br>

    <span>密码：</span>
    <input type="password" v-model="pwd">

    <span>性别：</span>
    <input type="radio" id="female">
    <label for="female">女</label>
    <input type="radio" id="male">
    <label for="male">男</label> <br>

    <span>爱好：</span>
    <input type="checkbox" id="basket">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot">
    <label for="foot">足球</label>
    <br>
    <select name="" id="" v-model="cityId">
      <option value="">请选择</option>
      <option :value="city.id" v-for="(city,index) in allCitys" :key="city.name">{{city.name}}</option>
    </select>

    <input type="submit" value="注册">

  </form>
</div>

<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      username: '',
      pwd: '',
      allCitys: [{id: 1,name: 'BJ'},{id: 2,name: 'ER'},{id: 3,name: 'TT'}],
      cityId: 1
    },
    methods: {
      handleSubmit () {
        console.log(this.username,this.pwd);
      }
    }
  })
</script>
</body>
</html>